<template>
    <PageTitle>
        Обо мне
    </PageTitle>

    <div class="container mt-3 px-0">
        <div class="row">
            <div class="col-3 d-md-block d-none">
                <img src="@/img/me.jpg" class="img-fluid img-thumbnail" alt="Мое фото">
            </div>
            <div class="col-md-9">
                <div class="container border rounded">
                    <h2>Основаня информация:</h2>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <b>ФИО:</b> Чиков Матвей Федорович
                        </li>
                        <li class="list-group-item">
                            <b>Дата рождения:</b> 27 ноября 2000 г.
                        </li>
                        <li class="list-group-item">
                            <b>Город проживания:</b> Санкт-Петербург
                        </li>
                        <li class="list-group-item">
                            <b>Специализация:</b> Программист, разработчик
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-3 border rounded">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h2>Ключевые навыки:</h2>
                <ul class="list-group list-group-horizontal-md">
                    <li class="list-group-item">C#</li>
                    <li class="list-group-item">ASP.NET</li>
                    <li class="list-group-item">Entity Framework</li>
                    <li class="list-group-item">xUnit</li>
                    <li class="list-group-item">JavaScript</li>
                    <li class="list-group-item">Vue.js</li>
                    <li class="list-group-item">Git</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container mt-3 border rounded">
        <div class="row">
            <div class="col-sm-12">
                <h2>Образование:</h2>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <b>Учебное заведение:</b> МГУ им. адмирала Г. И. Невельского, г. Владивосток
                    </li>
                    <li class="list-group-item">
                        <b>Уровень:</b> Бакалавр
                    </li>
                    <li class="list-group-item">
                        <b>Факультет:</b> Факультет электроники и информационных технологий
                    </li>
                    <li class="list-group-item">
                        <b>Специализация:</b> Инфокоммуникационные технологии и системы связи
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container mt-3 border rounded">
        <div class="row">
            <div class="col-md-12">
                <h2>Мои контакты:</h2>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <b>Телефон: </b>
                        <a href="tel:+79147291215">(914) 729-12-15</a>
                        <button @click="copy('+79147291215')" class="btn btn-sm">
                            <i class="bi bi-copy"></i>
                        </button>
                    </li>
                    <li class="list-group-item">
                        <b>Email: </b>
                        <a href="mailto:ia-matvey@mail.ru">ia-matvey@mail.ru</a>
                        <button @click="copy('ia-matvey@mail.ru')" class="btn btn-sm">
                            <i class="bi bi-copy"></i>
                        </button>
                    </li>
                    <li class="list-group-item">
                        <b>Telegram: </b>
                        <a href="tg://resolve?domain=ChikovMF">@ChikovMF</a>
                        <button @click="copy('@ChikovMF')" class="btn btn-sm">
                            <i class="bi bi-copy"></i>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        copy(text) {
            navigator.clipboard.writeText(text);
        }

    }
}
</script>

<style lang="scss" scoped></style>